<!--
 * @Autor: Ruohong Yu
 * @Date: 2021-11-27 16:40:05
 * @LastEditors: Ruohong Yu
 * @LastEditTime: 2021-12-20 13:07:33
 * @Description: 框架
 * @FilePath: \mimalld:\桌面\作业\软件工程\前端\front_regit\src\views\Home.vue
-->

<template>
  <el-container style="height: 100%">
    <!-- 新手教程 -->
    <teach v-show="this.$store.getters.getnewuser!=1" />
    <!-- 侧边栏 -->
    <el-aside v-show="this.$store.getters.getnewuser==1" :width="isCollapse ? '64px' : '217px'" style="height: 100%">
      <span class="all_title" :style="isCollapse ? 'width: 64px' : 'width: 217px'"><div :class="isCollapse ? 'titleimg_two':'titleimg_one'" /><span v-if="!isCollapse">高校科研管理系统</span></span>
      <el-menu
        unique-opened
        :collapse="isCollapse"
        :collapse-transition="false"
        router
        :default-active="activePath"
        background-color="#333744"
        text-color="#fff"
        active-text-color="#409FFF"
        style="height: 100%"
      >
        <!-- :unique-opened="true"->只允许展开一个菜单 -->
        <!-- :collapse-transition="false" -> 关闭动画 -->
        <!-- router -> 导航开启路由模式 -->
        <!-- 一级菜单  -->
        <el-submenu
          v-for="(item,i) in menuList"
          :key="item.id"
          :index="item.id + ''"
          :disabled="item.disabled"
        >
          <!-- 一级菜单的模板区域 -->
          <template slot="title">
            <i :class="iconObj[i%4]" />
            <span>{{ item.name }}</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item
            v-for="subItem in item.children"
            :key="subItem.id"
            :index="'/' + subItem.path"
            :disabled="subItem.disabled"
            @click="saveNavState('/' + subItem.path)"
          >
            <!-- 导航开启路由模式：
                将index值作为导航路由 -->
            <!-- 二级菜单的模板区域 -->
            <template slot="title">
              <i class="el-icon-menu" />
              <span>{{ subItem.name }}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <!-- 主体 -->
    <el-container v-show="this.$store.getters.getnewuser==1" style="height: 100%">
      <!-- 内容主体 -->
      <nav-header @changecollapse="handlecollapse($event)" />
      <el-main>
        <router-view />
      </el-main>
      <el-footer>
        <div>
          <a href="#">帮助</a>
          <a href="#">隐私</a>
          <a href="#">条款</a>
        </div>
        <div>
          copyright@软工4班第八组
        </div>
      </el-footer>
    </el-container>

  </el-container>
</template>

<script>
import axios from 'axios'
import crypto from '../crypto/crypto'
import NavHeader from '../components/NavHeader.vue'
import Teach from '../components/Novicetutorial/Teach.vue'
export default {
  name: 'Home',
  components: {
    NavHeader,
    Teach
  },
  data() {
    return {
      // 左侧菜单数据
      userid: this.$store.getters.getuserId,
      menuList: [],
      roleName: '',
      permissionList: this.$route.params.data,
      iconObj: {
        0: 'el-icon-location',
        1: 'el-icon-setting',
        2: 'el-icon-document',
        3: 'el-icon-menu'
      },
      // 默认不折叠
      isCollapse: this.$store.getters.getisCollapse,
      // 被激活导航地址
      activePath: 'users',
      getdata: []
    }
  },
  created() {
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
    this.isgetDictionary()
    // console.log('222', this.$store.getters.getnewuser)
  },
  methods: {
    /**
     * @description: 缓存字典
     * @param {*}
     * @return {*}
     * @author: Ruohong Yu
     */
    getDictionary() {
      // console.log('getDictionary')
      axios.get('/dictionary/searchAll/' + 'achievementType')
        .then(res => {
          this.getdata = res.data.data
          var at = []
          for (var i = 0; i < this.getdata.length; i++) {
            at[this.getdata[i].atId] = { name: this.getdata[i].atName, id: this.getdata[i].atId }
          }
          // console.log(at)
          this.$store.commit('setat', JSON.stringify(at))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/dictionary/searchAll/' + 'conclusionType')
        .then(res => {
          this.getdata = res.data.data
          var ct = []
          for (var i = 0; i < this.getdata.length; i++) {
            ct[this.getdata[i].ctId] = { name: this.getdata[i].ctName, id: this.getdata[i].ctId }
          }
          this.$store.commit('setct', JSON.stringify(ct))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/dictionary/searchAll/' + 'department')
        .then(res => {
          this.getdata = res.data.data
          var department = []
          for (var i = 0; i < this.getdata.length; i++) {
            department[this.getdata[i].departmentId] = { name: this.getdata[i].departmentName, id: this.getdata[i].departmentId }
          }
          // console.log(department)
          this.$store.commit('setdepartment', JSON.stringify(department))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/dictionary/searchAll/' + 'level')
        .then(res => {
          this.getdata = res.data.data
          var level = []
          for (var i = 0; i < this.getdata.length; i++) {
            level[this.getdata[i].levelId] = { name: this.getdata[i].levelName, id: this.getdata[i].levelId }
          }
          this.$store.commit('setlevel', JSON.stringify(level))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/dictionary/searchAll/' + 'nature')
        .then(res => {
          this.getdata = res.data.data
          var nature = []
          for (var i = 0; i < this.getdata.length; i++) {
            nature[this.getdata[i].natureId] = { name: this.getdata[i].natureName, id: this.getdata[i].natureId }
          }
          this.$store.commit('setnature', JSON.stringify(nature))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/dictionary/searchAll/' + 'paperType')
        .then(res => {
          this.getdata = res.data.data
          var pt = []
          for (var i = 0; i < this.getdata.length; i++) {
            pt[this.getdata[i].ptId] = { name: this.getdata[i].ptName, id: this.getdata[i].ptId }
          }
          this.$store.commit('setpt', JSON.stringify(pt))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/dictionary/searchAll/' + 'patentRange')
        .then(res => {
          this.getdata = res.data.data
          var pr = []
          for (var i = 0; i < this.getdata.length; i++) {
            pr[this.getdata[i].prId] = { name: this.getdata[i].prName, id: this.getdata[i].prId }
          }
          this.$store.commit('setpr', JSON.stringify(pr))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/dictionary/searchAll/' + 'patentStatus')
        .then(res => {
          this.getdata = res.data.data
          var ps = []
          for (var i = 0; i < this.getdata.length; i++) {
            ps[this.getdata[i].psId] = { name: this.getdata[i].psName, id: this.getdata[i].psId }
          }
          this.$store.commit('setps', JSON.stringify(ps))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/dictionary/searchAll/' + 'periodical')
        .then(res => {
          this.getdata = res.data.data
          var periodical = []
          for (var i = 0; i < this.getdata.length; i++) {
            periodical[this.getdata[i].periodicalId] = { name: this.getdata[i].periodicalName, id: this.getdata[i].periodicalId }
          }
          this.$store.commit('setperiodical', JSON.stringify(periodical))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/dictionary/searchAll/' + 'reseachType')
        .then(res => {
          this.getdata = res.data.data
          var rt = []
          if (res.data.data) {
            for (var i = 0; i < this.getdata.length; i++) {
              rt[this.getdata[i].rtId] = { name: this.getdata[i].rtName, id: this.getdata[i].rtId }
            }
          }
          this.$store.commit('setrt', JSON.stringify(rt))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/dictionary/searchAll/' + 'status')
        .then(res => {
          this.getdata = res.data.data
          var status = []
          for (var i = 0; i < this.getdata.length; i++) {
            status[this.getdata[i].statusId] = { name: this.getdata[i].statusName, id: this.getdata[i].statusId }
          }
          this.$store.commit('setstatus', JSON.stringify(status))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/dictionary/searchAll/' + 'subjectCategory')
        .then(res => {
          this.getdata = res.data.data
          var sc = []
          for (var i = 0; i < this.getdata.length; i++) {
            sc[this.getdata[i].scId] = { name: this.getdata[i].scName, id: this.getdata[i].scId }
          }
          this.$store.commit('setsc', JSON.stringify(sc))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/dictionary/searchAll/' + 'subject')
        .then(res => {
          this.getdata = res.data.data
          var subject = []
          for (var i = 0; i < this.getdata.length; i++) {
            subject[this.getdata[i].subjectId] = { name: this.getdata[i].subjectName, id: this.getdata[i].subjectId }
          }
          this.$store.commit('setsubject', JSON.stringify(subject))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/user/getUsers')
        .then(res => {
          this.getdata = res.data.data
          var user = []
          for (var i = 0; i < this.getdata.length; i++) {
            user[this.getdata[i].userId] = { realname: this.getdata[i].userRealname, id: this.getdata[i].userId, username: this.getdata[i].username, usernumber: this.getdata[i].userNumber, rolename: this.getdata[i].roleName }
          }
          // console.log(user)
          this.$store.commit('setuser', JSON.stringify(user))
        })
        .catch(err => {
          console.error(err)
        })

      axios.get('/project/', { params: { userId: this.userid, pageSize: 999 }})
        .then(res => {
          var projectlist = []
          var applynum = 0
          var firstnum = 0
          var secondnum = 0
          var endapplynum = 0
          var endnum = 0
          var projectlistlength = 0
          if (res.data.data) {
            projectlist = res.data.data.list
            for (var i = 0; i < projectlist.length; i++) {
              if (projectlist[i].statusId === 1) {
                applynum++
              } else if (projectlist[i].statusId === 2) {
                firstnum++
              } else if (projectlist[i].statusId === 3) {
                secondnum++
              } else if (projectlist[i].statusId === 4) {
                endapplynum++
              } else if (projectlist[i].statusId === 5) {
                endnum++
              }
            }
            projectlistlength = projectlist.length
          }
          // console.log(projectlist)
          // console.log(endnum)
          var s
          s = crypto.set(applynum)
          this.$store.commit('setapplynum', s)
          s = crypto.set(firstnum)
          this.$store.commit('setfirstnum', s)
          s = crypto.set(secondnum)
          this.$store.commit('setsecondnum', s)
          s = crypto.set(endapplynum)
          this.$store.commit('setendapplynum', s)
          s = crypto.set(endnum)
          this.$store.commit('setendnum', s)
          s = crypto.set(projectlistlength)
          this.$store.commit('setprojectlistlength', s)
        })
        .catch(err => {
          console.error(err)
        })
    },

    /**
     * @description: 是否缓存字典
     * @param {*}
     * @return {*}
     * @author: Ruohong Yu
     */
    isgetDictionary() {
      // var at = (this.$store.getters.getat)
      // // at = JSON.parse(at)
      // console.log('at', at)
      // if (at === null) {
      // if (Array.isArray(at)) {
      //   if (at.length === 0) {
      //     this.getDictionary()
      //   }
      // } else if (at === null) {
      //   this.getDictionary()
      // }
      this.getDictionary()
    },

    handlecollapse(change) {
      this.isCollapse = change
    },

    /**
     * @description: 获取目录
     * @param {*}
     * @return {*}
     * @author: Ruohong Yu
     */
    getMenuList() {
      this.roleName = this.$store.getters.getroleName
      if (this.roleName === '超级管理员') {
        this.menuList = [
          {
            id: 1,
            name: '我的项目',
            path: crypto.set('1'),
            children: [
              {
                id: 2,
                name: '工作台',
                path: crypto.set('2'),
                disabled: false
              },
              {
                id: 47,
                name: '数据大屏',
                path: crypto.set('47'),
                disabled: false
              }
            ]
          },
          {
            id: 3,
            name: '科研项目',
            path: crypto.set('3'),
            children: [
              {
                id: 4,
                name: '科研项目在线申报',
                path: crypto.set('4'),
                disabled: false
              },
              {
                id: 5,
                name: '结题申请',
                path: crypto.set('5'),
                disabled: false
              }
            ]
          },
          {
            id: 8,
            name: '项目审核',
            path: crypto.set('8'),
            children: [
              {
                id: 9,
                name: '项目初审',
                path: crypto.set('9'),
                disabled: false
              },
              {
                id: 6,
                name: '项目二审',
                path: crypto.set('6'),
                disabled: false
              },
              {
                id: 10,
                name: '论文成果审核',
                path: crypto.set('10'),
                disabled: false
              },
              {
                id: 11,
                name: '获奖成果审核',
                path: crypto.set('11'),
                disabled: false
              },
              {
                id: 12,
                name: '专利成果审核',
                path: crypto.set('12'),
                disabled: false
              }
            ]
          },
          {
            id: 13,
            name: '科研考核',
            path: crypto.set('13'),
            children: [
              {
                id: 15,
                name: '考核方案',
                path: crypto.set('15'),
                disabled: false
              },
              {
                id: 16,
                name: '考核结果',
                path: crypto.set('16'),
                disabled: false
              }
            ]
          },
          {
            id: 17,
            name: '科研成果',
            path: crypto.set('17'),
            children: [
              {
                id: 18,
                name: '论文成果',
                path: crypto.set('18'),
                disabled: false
              },
              {
                id: 19,
                name: '获奖成果',
                path: crypto.set('19'),
                disabled: false
              },
              {
                id: 20,
                name: '专利成果',
                path: crypto.set('20'),
                disabled: false
              }
            ]
          },
          {
            id: 21,
            name: '系统管理',
            path: crypto.set('21'),
            children: [
              {
                id: 22,
                name: '用户管理',
                path: crypto.set('22'),
                disabled: false
              },
              {
                id: 23,
                name: '权限管理',
                path: crypto.set('23'),
                disabled: false
              },
              {
                id: 24,
                name: '角色管理',
                path: crypto.set('24'),
                disabled: false
              },
              {
                id: 25,
                name: '数据字典',
                path: crypto.set('25'),
                disabled: false
              },
              {
                id: 27,
                name: '日志审计',
                path: crypto.set('27'),
                disabled: false
              }
            ]
          }]
      } else if (this.roleName === '教师') {
        this.menuList = [
          {
            id: 1,
            name: '我的项目',
            path: crypto.set('1'),
            children: [
              {
                id: 2,
                name: '工作台',
                path: crypto.set('2'),
                disabled: false
              }
            ]
          },
          {
            id: 3,
            name: '科研项目',
            path: crypto.set('3'),
            children: [
              {
                id: 4,
                name: '科研项目在线申报',
                path: crypto.set('4'),
                disabled: false
              },
              {
                id: 5,
                name: '结题申请',
                path: crypto.set('5'),
                disabled: false
              }
            ]
          },
          {
            id: 8,
            name: '项目审核',
            path: crypto.set('8'),
            disabled: true,
            children: [
              {
                id: 9,
                name: '项目初审',
                path: crypto.set('9'),
                disabled: true
              },
              {
                id: 6,
                name: '项目二审',
                path: crypto.set('6'),
                disabled: true
              },
              {
                id: 10,
                name: '论文成果审核',
                path: crypto.set('10'),
                disabled: true
              },
              {
                id: 11,
                name: '获奖成果审核',
                path: crypto.set('11'),
                disabled: true
              },
              {
                id: 12,
                name: '专利成果审核',
                path: crypto.set('12'),
                disabled: true
              }
            ]
          },
          {
            id: 13,
            name: '科研考核',
            path: crypto.set('13'),
            children: [
              {
                id: 15,
                name: '考核方案',
                path: crypto.set('15'),
                disabled: false
              },
              {
                id: 16,
                name: '考核结果',
                path: crypto.set('16'),
                disabled: false
              }
            ]
          },
          {
            id: 17,
            name: '科研成果',
            path: crypto.set('17'),
            children: [
              {
                id: 18,
                name: '论文成果',
                path: crypto.set('18'),
                disabled: false
              },
              {
                id: 19,
                name: '获奖成果',
                path: crypto.set('19'),
                disabled: false
              },
              {
                id: 20,
                name: '专利成果',
                path: crypto.set('20'),
                disabled: false
              }
            ]
          },
          {
            id: 21,
            name: '系统管理',
            path: crypto.set('21'),
            disabled: true,
            children: [
              {
                id: 22,
                name: '用户管理',
                path: crypto.set('22'),
                disabled: true
              },
              {
                id: 23,
                name: '权限管理',
                path: crypto.set('23'),
                disabled: true
              },
              {
                id: 24,
                name: '角色管理',
                path: crypto.set('24'),
                disabled: true
              },
              {
                id: 25,
                name: '数据字典',
                path: crypto.set('25'),
                disabled: true
              }
            ]
          }]
      } else if (this.roleName === '科研机构') {
        this.menuList = [
          {
            id: 1,
            name: '我的项目',
            path: crypto.set('1'),
            children: [
              {
                id: 2,
                name: '工作台',
                path: crypto.set('2'),
                disabled: false
              }
            ]
          },
          {
            id: 3,
            name: '科研项目',
            path: crypto.set('3'),
            disabled: true,
            children: [
              {
                id: 4,
                name: '科研项目在线申报',
                path: crypto.set('4'),
                disabled: true
              },
              {
                id: 5,
                name: '结题申请',
                path: crypto.set('5'),
                disabled: true
              }
            ]
          },
          {
            id: 8,
            name: '项目审核',
            path: crypto.set('8'),
            children: [
              {
                id: 9,
                name: '项目初审',
                path: crypto.set('9'),
                disabled: false
              },
              {
                id: 6,
                name: '项目二审',
                path: crypto.set('6'),
                disabled: false
              },
              {
                id: 10,
                name: '论文成果审核',
                path: crypto.set('10'),
                disabled: false
              },
              {
                id: 11,
                name: '获奖成果审核',
                path: crypto.set('11'),
                disabled: false
              },
              {
                id: 12,
                name: '专利成果审核',
                path: crypto.set('12'),
                disabled: false
              }
            ]
          },
          {
            id: 13,
            name: '科研考核',
            path: crypto.set('13'),
            children: [
              {
                id: 15,
                name: '考核方案',
                path: crypto.set('15'),
                disabled: false
              },
              {
                id: 16,
                name: '考核结果',
                path: crypto.set('16'),
                disabled: false
              }
            ]
          },
          {
            id: 17,
            name: '科研成果',
            path: crypto.set('17'),
            children: [
              {
                id: 18,
                name: '论文成果',
                path: crypto.set('18'),
                disabled: false
              },
              {
                id: 19,
                name: '获奖成果',
                path: crypto.set('19'),
                disabled: false
              },
              {
                id: 20,
                name: '专利成果',
                path: crypto.set('20'),
                disabled: false
              }
            ]
          },
          {
            id: 21,
            name: '系统管理',
            path: crypto.set('21'),
            disabled: true,
            children: [
              {
                id: 22,
                name: '用户管理',
                path: crypto.set('22'),
                disabled: true
              },
              {
                id: 23,
                name: '权限管理',
                path: crypto.set('23'),
                disabled: true
              },
              {
                id: 24,
                name: '角色管理',
                path: crypto.set('24'),
                disabled: true
              },
              {
                id: 25,
                name: '数据字典',
                path: crypto.set('25'),
                disabled: true
              }
            ]
          }]
      } else if (this.roleName === '秘书处') {
        this.menuList = [
          {
            id: 1,
            name: '我的项目',
            path: crypto.set('1'),
            children: [
              {
                id: 2,
                name: '工作台',
                path: crypto.set('2'),
                disabled: false
              }
            ]
          },
          {
            id: 3,
            name: '科研项目',
            path: crypto.set('3'),
            disabled: true,
            children: [
              {
                id: 4,
                name: '科研项目在线申报',
                path: crypto.set('4'),
                disabled: true
              },
              {
                id: 5,
                name: '结题申请',
                path: crypto.set('5'),
                disabled: true
              }
            ]
          },
          {
            id: 8,
            name: '项目审核',
            path: crypto.set('8'),
            children: [
              {
                id: 9,
                name: '项目初审',
                path: crypto.set('9'),
                disabled: false
              },
              {
                id: 6,
                name: '项目二审',
                path: crypto.set('6'),
                disabled: false
              },
              {
                id: 10,
                name: '论文成果审核',
                path: crypto.set('10'),
                disabled: false
              },
              {
                id: 11,
                name: '获奖成果审核',
                path: crypto.set('11'),
                disabled: false
              },
              {
                id: 12,
                name: '专利成果审核',
                path: crypto.set('12'),
                disabled: false
              }
            ]
          },
          {
            id: 13,
            name: '科研考核',
            path: crypto.set('13'),
            children: [
              {
                id: 15,
                name: '考核方案',
                path: crypto.set('15'),
                disabled: false
              },
              {
                id: 16,
                name: '考核结果',
                path: crypto.set('16'),
                disabled: false
              }
            ]
          },
          {
            id: 17,
            name: '科研成果',
            path: crypto.set('17'),
            children: [
              {
                id: 18,
                name: '论文成果',
                path: crypto.set('18'),
                disabled: false
              },
              {
                id: 19,
                name: '获奖成果',
                path: crypto.set('19'),
                disabled: false
              },
              {
                id: 20,
                name: '专利成果',
                path: crypto.set('20'),
                disabled: false
              }
            ]
          },
          {
            id: 21,
            name: '系统管理',
            path: crypto.set('21'),
            disabled: true,
            children: [
              {
                id: 22,
                name: '用户管理',
                path: crypto.set('22'),
                disabled: true
              },
              {
                id: 23,
                name: '权限管理',
                path: crypto.set('23'),
                disabled: true
              },
              {
                id: 24,
                name: '角色管理',
                path: crypto.set('24'),
                disabled: true
              },
              {
                id: 25,
                name: '数据字典',
                path: crypto.set('25'),
                disabled: true
              }
            ]
          }]
      }
    },

    /**
     * @description: 退出登录
     * @param {*}
     * @return {*}
     * @author: Ruohong Yu
     */
    logout() {
      axios
        .get('user/logout')
        .then(() => {
          this.$message.info('退出成功')
        })
        .catch((error) => {
          console.log(error)
        })
      // 清空token
      window.sessionStorage.clear()
      this.$router.push('/')
      window.location.reload()
    },
    // 保存连接的激活地址
    saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
    }
  }
}
</script>

<style lang="less">
body,
html {
  height: 100%;
  width: 100%;
}
.el-container {
  height: 100%;
}
.el-aside {
  background-color: #333744;
  height: 100%;
  padding-top: 50px;
  .el-menu {
    border: none;
  }
  .all_title{
    position: absolute;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    top: 0px;
    z-index: 100;
    display: inline-block;
    background-color: #00284D;
    font: bold;
    font-size: 20px;
    color: white;
    width: 217px;
    height: 50px;
    line-height: 50px;
    padding-left: 43px;
    overflow: hidden;
    .titleimg_one{
      position: absolute;
      top: 8px;
      left: 8px;
      display:inline-block;
      width:30px;
      height:30px;
      background:url('../assets/img/logo.png') no-repeat center;
      background-size: contain;
    }
    .titleimg_two{
      position: absolute;
      top: 8px;
      left: 16px;
      display:inline-block;
      width:30px;
      height:30px;
      background:url('../assets/img/logo.png') no-repeat center;
      background-size: contain;
    }
  }
}

.el-main {
  background-color: #fff;
  padding-bottom: 0px;
  margin: 0px;
}
.iconfont {
  margin-right: 10px;
}
.toggle-button {
  background-color: #4a5064;
  font-size: 10px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  // 鼠标放上去变成小手
  cursor: pointer;
}
.el-footer{
  background-color: white;
  color: #333;
  text-align: center;
  /* line-height: 60px; */
  div{
    font-size: 10px;
    color: grey;
    a{
      color: grey;
      padding: 5px;
    }
    padding: 5px;
  }
}
</style>
